<template>
  <div class="page-group">
    <SearchGroup
      ref="searchGroup"
      title="用户列表"
      :searchData="searchData"
      @searchFn="searchFn"
    />
    <div style="padding: 0 16px">
      <a-table
        :columns="columns"
        :rowKey="(r, i) => i"
        :data-source="exhibitData"
        :loading="loading"
        :pagination="{
          current: pageNum,
          pageSize: pageSize,
          total: total,
          position: 'bottom',
          pageSizeOptions: ['10', '15', '20', '25'],
          showQuickJumper: true,
          showSizeChanger: true,
          onChange: tablePageChange,
          onShowSizeChange: tablePageChange,
        }"
        :scroll="{ x: 1200,y:400 }"
      >
        <div slot="nameSlot" slot-scope="text">
          <a-tooltip placement="leftTop"
            ><template slot="title">{{ formatDataValue(text) }}</template>
            <span class="substr" style="display: block; width: 100%">{{
              formatDataValue(text)
            }}</span>
          </a-tooltip>
        </div>
        <span slot="handler" slot-scope="text, record" class="handler">
          <a-popconfirm
            :title="deleteText(record)"
            cancelText="取消"
            okText="确定"
            @confirm="
              () => {
                delUser(record);
              }
            "
          >
            <a-icon
              slot="icon"
              type="exclamation-circle"
              theme="filled"
              style="color: #ff0200"
            />
            <a
              href="javascript:;"
              :class="record.status == 0 ? 'no-link' : 'delete'"
              >删除</a
            >
          </a-popconfirm>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import api from "@/api/user";
import SearchGroup from "@/components/SearchGroup.vue";
import commonJS from "@/utils/commonJS";
const searchData = [
  {
    type: "input",
    label: "用户昵称",
    dataIndex: "userName",
    option: {
      disabled: false,
      placeholder: "请输入用户昵称",
      defaultValue: "",
    },
  },
  {
    type: "input",
    label: "用户Id",
    dataIndex: "userId",
    option: {
      disabled: false,
      placeholder: "请输入用户Id",
      defaultValue: "",
    },
  },
];
const columns = [
  {
    title: "用户Id",
    dataIndex: "userId",
    width: "90px",
    align: "left",
  },
  {
    title: "用户昵称",
    width: "130px",
    dataIndex: "userName",
    align: "left",
    scopedSlots: { customRender: "nameSlot" },
  },
  {
    title: "操作",
    dataIndex: "handler",
    align: "right",
    fixed: "right",
    width: "160px",
    scopedSlots: { customRender: "handler" },
  },
];
export default {
  name: "UserView",
  props: {},
  data() {
    return {
      searchData,
      columns,
      searchCont: [],
      pageNum: 1,
      pageSize: 10,
      exhibitData: [],
      totalData: [],
      total: 0,
      loading: false,
    };
  },
  components: {
    SearchGroup,
  },
  computed: {},
  watch: {},
  methods: {
    formatDataValue(txt) {
      return commonJS.formatDataValue(txt);
    },
    // 查找数据
    searchFn(val) {
      if (val) {
        this.searchCont = JSON.parse(JSON.stringify(val));
      } else {
        val = JSON.parse(JSON.stringify(this.searchCont));
      }
      this.loading = true;
      api.userList(val).then((res) => {
        this.loading = false;
        console.log(res);
        if (res.status === 200) {
          this.totalData = res.data;
          this.total = res.data.length;
          this.exhibitData = this.totalData.slice(
            (this.pageNum - 1) * this.pageSize,
            this.pageNum * this.pageSize
          );
          console.log("exhibit", this.exhibitData);
        } else {
          this.totalData = [];
          this.total = 0;
        }
      });
    },
    // 表格页数改变
    tablePageChange(pageNum, pageSize) {
      this.pageNum = pageNum;
      this.pageSize = pageSize;
      this.exhibitData = this.totalData.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageNum * this.pageSize
      );
    },
    deleteText(record) {
      let b = record.userName;
      return "确定将" + '"' + b + '"' + "删除吗？";
    },
    // 删除用户
    delUser(record) {
      const th = this;
      api
        .delUser({
          userId: record.userId,
        })
        .then((res) => {
          if (res.status === 200) {
            // 重取数据
            th.searchFn();
          } else {
            th.$store.dispatch("tipModel", { state: 99, msg: "删除错误" });
          }
        });
    },
  },
  created() {},
  mounted() {
    this.searchFn();
  },
};
</script>

<style lang="less" scoped></style>
